<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Hanging Rope</title>
</head>
<body>
    <canvas id="physicsCanvas"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Canvas dimensions
        const canvasWidth = 400;
        const canvasHeight = 500;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        
        // Fill background white
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        
        // Helper function to draw a fraction
        function drawFraction(context, numerator, denominator, x, y) {
            const originalFont = context.font;
            const originalAlign = context.textAlign;
            const originalBaseline = context.textBaseline;
            const originalLineWidth = context.lineWidth;
            
            context.font = "italic 28px 'Times New Roman'";
            context.textAlign = 'center';
            context.textBaseline = 'middle';

            // Numerator
            context.fillText(numerator, x, y - 18);

            // Denominator
            context.fillText(denominator, x, y + 18);

            // Fraction line
            context.lineWidth = 1.5;
            const metrics = context.measureText(numerator); // Assume numerator 'L' is wide enough
            const line_width = metrics.width + 8;
            context.beginPath();
            context.moveTo(x - line_width / 2, y);
            context.lineTo(x + line_width / 2, y);
            context.stroke();
            
            // Restore context
            context.font = originalFont;
            context.textAlign = originalAlign;
            context.textBaseline = originalBaseline;
            context.lineWidth = originalLineWidth;
        }

        // --- Ceiling ---
        const y_ceiling = 100;
        const x_start_ceiling = 50;
        const x_end_ceiling = 350;
        
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x_start_ceiling, y_ceiling);
        ctx.lineTo(x_end_ceiling, y_ceiling);
        ctx.stroke();

        // Hatches for the fixed surface
        const hatch_length = 15;
        const hatch_angle = Math.PI / 4; // 45 degrees
        for (let x = x_start_ceiling + 10; x < x_end_ceiling; x += 15) {
            ctx.beginPath();
            ctx.moveTo(x, y_ceiling);
            ctx.lineTo(x + hatch_length * Math.cos(hatch_angle), y_ceiling - hatch_length * Math.sin(hatch_angle));
            ctx.stroke();
        }

        // --- Rope ---
        const x_A = 175;
        const x_B = 225;
        const vertical_length = 200;
        const y_vertical_end = y_ceiling + vertical_length;
        const radius = (x_B - x_A) / 2;
        const cx = (x_A + x_B) / 2;
        
        ctx.lineWidth = 3;

        // Draw vertical parts of the rope
        ctx.beginPath();
        ctx.moveTo(x_A, y_ceiling);
        ctx.lineTo(x_A, y_vertical_end);
        ctx.moveTo(x_B, y_ceiling);
        ctx.lineTo(x_B, y_vertical_end);
        ctx.stroke();
        
        // Draw the U-bend of the rope
        ctx.beginPath();
        // arc(x, y, radius, startAngle, endAngle, anticlockwise)
        // Draw bottom semi-circle from 0 to PI radians (3 o'clock to 9 o'clock), clockwise.
        ctx.arc(cx, y_vertical_end, radius, 0, Math.PI, false);
        ctx.stroke();
        
        // --- Labels ---
        
        // A and B labels
        ctx.save();
        ctx.font = "italic 32px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText("A", x_A - 35, y_ceiling + 40);
        ctx.fillText("B", x_B + 35, y_ceiling + 40);
        ctx.restore();

        // L/2 labels
        const label_y = y_ceiling + vertical_length / 2;
        const label_x_left = x_A - 50;
        const label_x_right = x_B + 50;
        
        drawFraction(ctx, "L", "2", label_x_left, label_y);
        drawFraction(ctx, "L", "2", label_x_right, label_y);

        // Figure caption
        ctx.save();
        ctx.font = "24px 'KaiTi', 'SimSun', 'Times New Roman', serif";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText("图 1", canvasWidth / 2, canvasHeight - 30);
        ctx.restore();

    </script>
</body>
</html>